<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    {% if env == "dev" %}
        <link rel="stylesheet" href="{{ root }}/css/mediaMy.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/font.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/layout.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/layoutPosition.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/color.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/border.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/flex.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/fa.css">
        <link rel="stylesheet" href="{{ root }}/css/app.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/user.css{{ rnd }}">
        {#<link rel="stylesheet" href="{{ root }}/css/aui.css{{ rnd }}">#}
        {#<link rel="stylesheet" href="{{ root }}/css/spinner.css{{ rnd }}">#}
        <link rel="stylesheet" href="{{ root }}/css/muse-ui.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/muse-ui-loading.all.css{{ rnd }}">
    {% else %}
        <link rel="stylesheet" href="{{ root }}/css/mediaMy.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/font.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/layout.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/layoutPosition.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/color.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/border.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/flex.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/fa.css">
        <link rel="stylesheet" href="{{ root }}/css/app.css{{ rnd }}">
        <link rel="stylesheet" href="{{ root }}/css/user.css{{ rnd }}">
        {#<link rel="stylesheet" href="{{ root }}/css/aui.css{{ rnd }}">#}
        {#<link rel="stylesheet" href="{{ root }}/css/spinner.css{{ rnd }}">#}
        <link rel="stylesheet" href="{{ root }}/css/muse-ui.css">
        <link rel="stylesheet" href="{{ root }}/css/muse-ui-loading.all.css">
    {% endif %}

    <style>
        /* load3 */
        .load3 {
            width: 60px;
            height: 60px;
            position: relative;
            margin: 100px auto;
        }

        .double-bounce1, .double-bounce2 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #67CF22;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;

            -webkit-animation: bounce 1.0s infinite ease-in-out;
            animation: bounce 1.0s infinite ease-in-out;
        }

        .double-bounce2 {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }

        @-webkit-keyframes bounce {
            0%, 100% {
                -webkit-transform: scale(0.0)
            }
            50% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bounce {
            0%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            50% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }


        /*Page Loading*/
        .fade-enter-active, .fade-leave-active {
            transition: opacity .4s;
        }

        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
        {
            opacity: 0;
        }
    </style>
    <style>
        /*List Loading*/
        .sk-wave {
            width: 6em;
            height: 2em;
            margin: auto;
            text-align: center;
            font-size: 1em;
        }

        .sk-wave .sk-rect {
            background-color: #67CF22;
            height: 100%;
            width: .5em;
            display: inline-block;
            -webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
            animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
        }

        .sk-wave .sk-rect-1 {
            -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s;
        }

        .sk-wave .sk-rect-2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .sk-wave .sk-rect-3 {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }

        .sk-wave .sk-rect-4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .sk-wave .sk-rect-5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        @-webkit-keyframes sk-wave-stretch-delay {
            0%, 40%, 100% {
                -webkit-transform: scaleY(0.4);
                transform: scaleY(0.4);
            }
            20% {
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
            }
        }

        @keyframes sk-wave-stretch-delay {
            0%, 40%, 100% {
                -webkit-transform: scaleY(0.4);
                transform: scaleY(0.4);
            }
            20% {
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
            }
        }
    </style>
    <style>
        .la-ball-newton-cradle, .la-ball-newton-cradle > div {
            position: relative;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box
        }

        .la-ball-newton-cradle {
            display: block;
            font-size: 0;
            color: #67CF22
        }

        .la-ball-newton-cradle.la-dark {
            color: #333
        }

        .la-ball-newton-cradle > div {
            display: inline-block;
            float: none;
            background-color: currentColor;
            border: 0 solid currentColor
        }

        .la-ball-newton-cradle {
            width: 40px;
            height: 10px
        }

        .la-ball-newton-cradle > div {
            width: 10px;
            height: 10px;
            border-radius: 100%
        }

        .la-ball-newton-cradle > div:first-child {
            -webkit-transform: translateX(0%);
            -moz-transform: translateX(0%);
            -ms-transform: translateX(0%);
            -o-transform: translateX(0%);
            transform: translateX(0%);
            -webkit-animation: ball-newton-cradle-left 1s 0s ease-out infinite;
            -moz-animation: ball-newton-cradle-left 1s 0s ease-out infinite;
            -o-animation: ball-newton-cradle-left 1s 0s ease-out infinite;
            animation: ball-newton-cradle-left 1s 0s ease-out infinite
        }

        .la-ball-newton-cradle > div:last-child {
            -webkit-transform: translateX(0%);
            -moz-transform: translateX(0%);
            -ms-transform: translateX(0%);
            -o-transform: translateX(0%);
            transform: translateX(0%);
            -webkit-animation: ball-newton-cradle-right 1s 0s ease-out infinite;
            -moz-animation: ball-newton-cradle-right 1s 0s ease-out infinite;
            -o-animation: ball-newton-cradle-right 1s 0s ease-out infinite;
            animation: ball-newton-cradle-right 1s 0s ease-out infinite
        }

        .la-ball-newton-cradle.la-sm {
            width: 20px;
            height: 4px
        }

        .la-ball-newton-cradle.la-sm > div {
            width: 4px;
            height: 4px
        }

        .la-ball-newton-cradle.la-2x {
            width: 80px;
            height: 20px
        }

        .la-ball-newton-cradle.la-2x > div {
            width: 20px;
            height: 20px
        }

        .la-ball-newton-cradle.la-3x {
            width: 120px;
            height: 30px
        }

        .la-ball-newton-cradle.la-3x > div {
            width: 30px;
            height: 30px
        }

        @-webkit-keyframes ball-newton-cradle-left {
            25% {
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in
            }
            50% {
                -webkit-transform: translateX(0%);
                transform: translateX(0%)
            }
        }

        @-moz-keyframes ball-newton-cradle-left {
            25% {
                -moz-transform: translateX(-100%);
                transform: translateX(-100%);
                -moz-animation-timing-function: ease-in;
                animation-timing-function: ease-in
            }
            50% {
                -moz-transform: translateX(0%);
                transform: translateX(0%)
            }
        }

        @-o-keyframes ball-newton-cradle-left {
            25% {
                -o-transform: translateX(-100%);
                transform: translateX(-100%);
                -o-animation-timing-function: ease-in;
                animation-timing-function: ease-in
            }
            50% {
                -o-transform: translateX(0%);
                transform: translateX(0%)
            }
        }

        @keyframes ball-newton-cradle-left {
            25% {
                -webkit-transform: translateX(-100%);
                -moz-transform: translateX(-100%);
                -o-transform: translateX(-100%);
                transform: translateX(-100%);
                -webkit-animation-timing-function: ease-in;
                -moz-animation-timing-function: ease-in;
                -o-animation-timing-function: ease-in;
                animation-timing-function: ease-in
            }
            50% {
                -webkit-transform: translateX(0%);
                -moz-transform: translateX(0%);
                -o-transform: translateX(0%);
                transform: translateX(0%)
            }
        }

        @-webkit-keyframes ball-newton-cradle-right {
            50% {
                -webkit-transform: translateX(0%);
                transform: translateX(0%)
            }
            75% {
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in
            }
            100% {
                -webkit-transform: translateX(0%);
                transform: translateX(0%)
            }
        }

        @-moz-keyframes ball-newton-cradle-right {
            50% {
                -moz-transform: translateX(0%);
                transform: translateX(0%)
            }
            75% {
                -moz-transform: translateX(100%);
                transform: translateX(100%);
                -moz-animation-timing-function: ease-in;
                animation-timing-function: ease-in
            }
            100% {
                -moz-transform: translateX(0%);
                transform: translateX(0%)
            }
        }

        @-o-keyframes ball-newton-cradle-right {
            50% {
                -o-transform: translateX(0%);
                transform: translateX(0%)
            }
            75% {
                -o-transform: translateX(100%);
                transform: translateX(100%);
                -o-animation-timing-function: ease-in;
                animation-timing-function: ease-in
            }
            100% {
                -o-transform: translateX(0%);
                transform: translateX(0%)
            }
        }

        @keyframes ball-newton-cradle-right {
            50% {
                -webkit-transform: translateX(0%);
                -moz-transform: translateX(0%);
                -o-transform: translateX(0%);
                transform: translateX(0%)
            }
            75% {
                -webkit-transform: translateX(100%);
                -moz-transform: translateX(100%);
                -o-transform: translateX(100%);
                transform: translateX(100%);
                -webkit-animation-timing-function: ease-in;
                -moz-animation-timing-function: ease-in;
                -o-animation-timing-function: ease-in;
                animation-timing-function: ease-in
            }
            100% {
                -webkit-transform: translateX(0%);
                -moz-transform: translateX(0%);
                -o-transform: translateX(0%);
                transform: translateX(0%)
            }
        }

        /*Bottom Loading*/

    </style>
    {% block css %}
    {% endblock %}
</head>
<body>

{% import "ApiCloud/Base/loading.html.twig" as loading %}
<div id="Page" v-cloak>
    <div id="statusbar"></div>
    {#    loading#}
    <transition name="fade">
        <div id="loading" class="coverF flcc" v-if="loading">
            <div class="load3">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>
    </transition>
    {% block body %}
    {% endblock %}
    <mu-snackbar :color="warning.color" :open.sync="warning.open">
        <mu-icon left :value="warning.icon"></mu-icon>
        {{ warning.message }}
        <mu-button flat slot="warning.action" color="#fff" @click="warning.open = false">关闭</mu-button>
    </mu-snackbar>
    {{ loading.bottom() }}
</div>
</body>

{#根据客户端不同进行配置#}
<script type="text/javascript">
    //跨域问题
    // document.domain="sano100.com";
    //客户端名称
    {#var AppClientName = "{{ Client }}";#}
</script>


{% if env == "dev" %}
    {#    <script src="{{ root }}/js/vue.min.js{{ rnd }}"></script>#}
    <script src="{{ root }}/js/jquery.js{{ rnd }}"></script>
    <script src="{{ root }}/js/vue.js{{ rnd }}"></script>
    <script src="{{ root }}/js/muse-ui.js{{ rnd }}"></script>
    <script src="{{ root }}/js/muse-ui-loading.js{{ rnd }}"></script>
    <script src="{{ root }}/js/ApiCloud.js{{ rnd }}"></script>
    <script src="{{ root }}/js/md5.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0app.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0api.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0window.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0init.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0mvvm.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0mvc.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0pic.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0list.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0user.js{{ rnd }}"></script>
    {#<script src="{{ root }}/js/0jpush.js{{ rnd }}"></script>#}
    <script src="{{ root }}/js/0conf.user.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0common.js{{ rnd }}"></script>
    {#<script src="{{ root }}/layer/layer.js{{ rnd }}"></script>#}
{% else %}
    <script src="{{ root }}/js/jquery.js{{ rnd }}"></script>
    <script src="{{ root }}/js/vue.min.js{{ rnd }}"></script>
    <script src="{{ root }}/js/muse-ui.js{{ rnd }}"></script>
    <script src="{{ root }}/js/muse-ui-loading.js{{ rnd }}"></script>
    <script src="{{ root }}/js/ApiCloud.js{{ rnd }}"></script>
    <script src="{{ root }}/js/md5.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0app.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0api.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0window.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0init.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0mvvm.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0mvc.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0pic.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0list.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0user.js{{ rnd }}"></script>
    {#<script src="{{ root }}/js/0jpush.js{{ rnd }}"></script>#}
    <script src="{{ root }}/js/0conf.user.js{{ rnd }}"></script>
    <script src="{{ root }}/js/0common.js{{ rnd }}"></script>
    {#<script src="{{ root }}/layer/layer.js{{ rnd }}"></script>#}
{% endif %}
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.8.0.min.js"></script>

{% block js %}
{% endblock %}
<script>
    // window.onload = apiready;
</script>
</html>
